/*删除js目录下的 reg.js的全部js代码，一会我们使用Jquery 实现*/
/*
* 等价于 页面初始化的onload事件，
*   页面全部标签元素加载完毕后，你要页面执行啥
* */
/*定义个标准位，flag  true为表单能提交， false 表单不能提交*/
let   flag = true ;
$(function(){
    /*
    * 给注册按钮添加一个单击事件。单击事件，叫click
    * */
    $("#reg").click(function(){
        /*强制调用4个校验函数，做与操作，一个为假，则标志位flag=false */
       flag  = verifyemail()&&verifyphone()&&verifypwd1()&&verifypwd2();
       if(!flag){
           alert("请检查注册表单数据！");
       }
    });


    /*1.让4个错误提示框，都隐藏。*/
    /*使用Jquery的 class 选择器 ，一次性在页面上选中了4个错误提示框*/
    /*JSON 格式  {k1:v1,k2:v2,k3:v3.....}*/
    //让他们4个都隐藏
    $(".iss").css({display:"none"});

    /*2.给4个文本框注册 丢失焦点事件。丢失焦点要求对应的错误提示框要显示*/
    /*blur() 丢失焦点事件：*/
    $(".wenbenkuang").blur(function(){
        /*$(this)表示的是 发生事件的当事人 */
        /*1.先获取当前文本框的id */
        /*attr()获取某个属性的值 */
        let id= $(this).attr("id");
        /*2.让  前缀is +文本框id     =  错误提示框的id*/
        let  isId = "is" +id ;
        /*3.再通过错误提示框的id 定位到  错误提示框标签本身*/
        /*使用Jquery id选择器，通过id直接定位到某一个唯一的标签元素*/
        /*4.让这个错误提示框 样式 显示*/
        $("#"+isId).css({display: "inline"});

        /*5.一但丢失焦点，执行一个叫eval js函数，作用是把一个字符串当js代码执行*/
        // eval("alert(123)");
        //verifyemail()
        eval("verify"+id+"()");


    });
    /*3.4个文本框获取焦点事件，要求对应的错误提示框要隐藏*/
    /*focus() 获取焦点事件。 */
    $(".wenbenkuang").focus(function(){
        /*1. 获取当前文本框id*/
        let   id = $(this).attr("id");
        /*2.  "is" + id = isId 错误提示框的id*/
        let  isId =  "is" +id ;
        /*3. 通过错误提示框id   isId  找到错误提示框*/
        /*4. 让这个框隐藏*/
        $("#"+isId).css({display:"none"});

    });
});
/*4个校验函数式独立的，出来写*/
/* 丢失焦点，分别调用 下面4 个校验函数 */

/*校验 Email*/
function  verifyemail(){
    // console.log("verifyemail");
    /*获取用户输入的email */
    /*文本框 取值  用val()*/
    let val =  $("#email").val();
    /*1.非空校验*/
    if(val==""){
        /*1.文本框边框变红  1像素，实线，红色*/
        $("#email").css({border:"1px solid red"});
        /*2.右侧错误提示信息为 Email不许为空*/
        /*text() 标签的文本 */
        $("#isemail").text("Email不许为空");
        /*3.右侧错误提示信息为红色 */
        $("#isemail").css({color:"red"});
        return  false ;
    }
    /*2.正则校验  正确的规则  */
    /*js中使用 正则表达式来描述规则*/
    /*  abc123@qq.com */
    /*
    * [] N个里面选1个
    * +  至少1个
    * @ 常量
    * \.  常量 .
    * {2,}   >=2
    * */
    let  reg  =  /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if(!reg.test(val)){
        /*不匹配*/
        /*1.文本框边框变红  1像素，实线，红色*/
        $("#email").css({border:"1px solid red"});
        /*2.右侧错误提示信息*/
        /*text() 标签的文本 */
        $("#isemail").text("Email格式不正确");
        /*3.右侧错误提示信息为红色 */
        $("#isemail").css({color:"red"});
        return  false ;
    }
    /*通过*/
    /*1. 文本框边框为漂亮绿  1像素 ,实现，漂亮绿*/
    $("#email").css({border:"1px solid #669933"})
    /*2.  错误提示信息  通过！ */
    $("#isemail").text("通过！");
    /*3. 错误错误提示信息为 漂亮绿*/
    $("#isemail").css({color:"#669933"});

    return  true ;

}
/*校验 手机号*/
function  verifyphone(){

    /*文本框 取值  用val()*/
    let val =  $("#phone").val();
    /*1.非空校验*/
    if(val==""){
        /*1.文本框边框变红  1像素，实线，红色*/
        $("#phone").css({border:"1px solid red"});
        /*2.右侧错误提示信息为 Email不许为空*/
        /*text() 标签的文本 */
        $("#isphone").text("手机号不许为空");
        /*3.右侧错误提示信息为红色 */
        $("#isphone").css({color:"red"});
        return  false ;
    }
    /*2.正则校验  正确的规则  */
    // let  reg  =  /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    //13355667788
    //  \d  任意一个数字
    //  \w  任意一个字母
    let  reg  =  /^1\d{10}$/;
    if(!reg.test(val)){
        /*不匹配*/
        /*1.文本框边框变红  1像素，实线，红色*/
        $("#phone").css({border:"1px solid red"});
        /*2.右侧错误提示信息*/
        /*text() 标签的文本 */
        $("#isphone").text("手机号格式不正确");
        /*3.右侧错误提示信息为红色 */
        $("#isphone").css({color:"red"});
        return  false ;
    }
    /*通过*/
    /*1. 文本框边框为漂亮绿  1像素 ,实现，漂亮绿*/
    $("#phone").css({border:"1px solid #669933"})
    /*2.  错误提示信息  通过！ */
    $("#isphone").text("通过！");
    /*3. 错误错误提示信息为 漂亮绿*/
    $("#isphone").css({color:"#669933"});

    return  true ;
}
/*校验 密码*/
function  verifypwd1(){
    /*文本框 取值  用val()*/
    let val =  $("#pwd1").val();
    /*1.非空校验*/
    if(val==""){
        /*1.文本框边框变红  1像素，实线，红色*/
        $("#pwd1").css({border:"1px solid red"});
        /*2.右侧错误提示信息为 Email不许为空*/
        /*text() 标签的文本 */
        $("#ispwd1").text("密码不许为空");
        /*3.右侧错误提示信息为红色 */
        $("#ispwd1").css({color:"red"});
        return  false ;
    }
    /*2.正则校验  正确的规则  */
    // let  reg  =  /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    //13355667788
    //  \d  任意一个数字
    //  \w  任意一个字母
    //至少3位以上 任意字符
    let  reg  =   /.{3,}/
    if(!reg.test(val)){
        /*不匹配*/
        /*1.文本框边框变红  1像素，实线，红色*/
        $("#pwd1").css({border:"1px solid red"});
        /*2.右侧错误提示信息*/
        /*text() 标签的文本 */
        $("#ispwd1").text("密码格式不正确");
        /*3.右侧错误提示信息为红色 */
        $("#ispwd1").css({color:"red"});
        return  false ;
    }
    /*通过*/
    /*1. 文本框边框为漂亮绿  1像素 ,实现，漂亮绿*/
    $("#pwd1").css({border:"1px solid #669933"})
    /*2.  错误提示信息  通过！ */
    $("#ispwd1").text("通过！");
    /*3. 错误错误提示信息为 漂亮绿*/
    $("#ispwd1").css({color:"#669933"});

    return  true ;
}
/*校验 确认密码*/
function   verifypwd2(){
    /*1.获取密码框的值*/
    let  pwd1 = $("#pwd1").val();
    /*2.再获取确认密码框的值*/
    let  pwd2 = $("#pwd2").val();
    /*3.比较  不相等  不通过  否则  通过*/
    if(pwd1!=pwd2){
        /*不匹配*/
        /*1.文本框边框变红  1像素，实线，红色*/
        $("#pwd2").css({border:"1px solid red"});
        /*2.右侧错误提示信息*/
        /*text() 标签的文本 */
        $("#ispwd2").text("两次密码不一致");
        /*3.右侧错误提示信息为红色 */
        $("#ispwd2").css({color:"red"});
        return  false ;
    }
    /*通过*/
    /*1.文本框边框变红  1像素，实线，红色*/
    $("#pwd2").css({border:"1px solid #669933"});
    /*2.右侧错误提示信息*/
    /*text() 标签的文本 */
    $("#ispwd2").text("通过！");
    /*3.右侧错误提示信息为红色 */
    $("#ispwd2").css({color:"#669933"});
    return  true ;

}

